<template>

	<div>
		<div class="banner">
			<image src="https://www.baixuemianshi.com/zhuanti/images/banner_skzwpp.jpg" mode="widthFix"></image>
			<div class="year">2023</div>
		</div>
		<div class="container">
			<div class="searchBox">
				<u-subsection :list="tabList" :current="curNow" @change="sectionChange"
					activeColor="#f56c6c"></u-subsection>

				<div class="zpxq" v-if="curNow == 0">
					<u-cell-group>
						<u-cell icon="map" :title="selectCity" @click="p_city = true" :isLink="true"
							arrow-direction="right"></u-cell>
						<u-cell icon="list-dot" :title="selectXt" @click="p_xt = true" :isLink="true"
							arrow-direction="right"></u-cell>
						<u-cell icon="grid" :title="selectBm" @click="p_bm = true" :isLink="true"
							arrow-direction="right"></u-cell>
					</u-cell-group>
					<u-picker :show="p_city" :columns="cityList" @confirm="changeCity" @cancel="closePicker"
						@close="closePicker" :closeOnClickOverlay="true" :immediateChange="true"></u-picker>
					<u-picker :show="p_xt" :columns="xtList" @confirm="changeXt" @cancel="closePicker"
						@close="closePicker" :closeOnClickOverlay="true" :immediateChange="true"></u-picker>
					<u-picker :show="p_bm" :columns="bmList" @confirm="changeBm" @cancel="closePicker"
						@close="closePicker" :closeOnClickOverlay="true" :immediateChange="true"></u-picker>
				</div>
				<div class="gwdm" v-else>
					<u-cell-group>
						<u-cell icon="map" :title="personSearch.selectCity" @click="personSearch.p_city = true"
							:isLink="true" arrow-direction="right"></u-cell>
						<u-cell icon="list-dot" :title="personSearch.selectXt" @click="personSearch.p_xt = true"
							:isLink="true" arrow-direction="right"></u-cell>
						<u-cell icon="bookmark" :title="personSearch.selectXl" @click="personSearch.p_xl = true"
							:isLink="true" arrow-direction="right"></u-cell>
						<u-cell icon="info-circle" :title="personSearch.selectGzjl" @click="personSearch.p_gzjl = true"
							:isLink="true" arrow-direction="right"></u-cell>
						<u-cell icon="coupon" :title="personSearch.selectZzmm" @click="personSearch.p_zzmm = true"
							:isLink="true" arrow-direction="right"></u-cell>
						<u-cell icon="setting" :title="personSearch.selectZkdx" @click="personSearch.p_zkdx = true"
							:isLink="true" arrow-direction="right"></u-cell>
					</u-cell-group>
					<u-picker :show="personSearch.p_city" :columns="personSearch.cityList" @confirm="p_changeCity"
						@cancel="closePicker" @close="closePicker" :closeOnClickOverlay="true"
						:immediateChange="true"></u-picker>
					<u-picker :show="personSearch.p_xt" :columns="personSearch.xtList" @confirm="p_changeXt"
						@cancel="closePicker" @close="closePicker" :closeOnClickOverlay="true"
						:immediateChange="true"></u-picker>
					<u-picker :show="personSearch.p_xl" :columns="personSearch.xlList" @confirm="p_changeXl"
						@cancel="closePicker" @close="closePicker" :closeOnClickOverlay="true"
						:immediateChange="true"></u-picker>
					<u-picker :show="personSearch.p_gzjl" :columns="personSearch.gzjlList" @confirm="p_changeGzjl"
						@cancel="closePicker" @close="closePicker" :closeOnClickOverlay="true"
						:immediateChange="true"></u-picker>
					<u-picker :show="personSearch.p_zzmm" :columns="personSearch.zzmmList" @confirm="p_changeZzmm"
						@cancel="closePicker" @close="closePicker" :closeOnClickOverlay="true"
						:immediateChange="true"></u-picker>
					<u-picker :show="personSearch.p_zkdx" :columns="personSearch.zkdxList" @confirm="p_changeZkdx"
						@cancel="closePicker" @close="closePicker" :closeOnClickOverlay="true"
						:immediateChange="true"></u-picker>
					<p class="warningText">* 以上条件非必填项</p>

				</div>
				<u-button type="warning" text="立即查询" @click="search" color="#f56c6c" :customStyle="buttonStyle">
				</u-button>
			</div>
			<div class="filterBox">
				<div class="container">
					<div class="filterFlex">
						<div class="item">
							<div class="bx_btn" @click="showSort = true" :class="selectSort == '默认排序' ? '' : 'success'">
								<span>排序方式</span>
								<u-icon name="arrow-down" size="14"
									:color="selectSort == '默认排序' ? '#323233' : '#5ac725'"></u-icon>
							</div>
						</div>
						<div class="item">
							<div class="bx_btn" @click="showCity = true" :class="selectCity == '选择地区' ? '' : 'success'">
								<span>{{ selectCity }}</span>
								<u-icon name="arrow-down" size="14"
									:color="selectCity == '选择地区' ? '#323233' : '#5ac725'"></u-icon>
							</div>
						</div>
						<div class="item">
							<u-search placeholder="部门名称/代码" @clickIcon="searchFuc()" @search="searchFuc()"
								v-model="searchVal" height="30" :clearabled="true" :showAction="false"
								borderColor="#f2f2f2" bgColor="#fff"></u-search>
						</div>
					</div>
				</div>
			</div>
			</u-sticky>

			<u-picker :show="showCity" :columns="[cityList]" @close="showCity = false" @cancel="showCity = false"
				@confirm="changeCity" :immediateChange="true" :closeOnClickOverlay="true"></u-picker>
			<u-picker :show="showSort" :columns="[sortList]" @close="showSort = false" @cancel="showSort = false"
				@confirm="changeSort" :immediateChange="true" :closeOnClickOverlay="true"></u-picker>

			<div class="container">
				<div class="zwList">
					<div class="item" v-for="(item,index) in list" :key="index" @click="showDetail(item._id)">
						<h3>{{ item.bmmc }}</h3>
						<p><span>招录人数</span> {{ item.zkrs }}</p>
						<p><span>部门代码</span> <i>{{ item.bmdm }}</i></p>
						<p><span>职位代码</span> {{ item.zwdm }}</p>
						<p><span>报名人数</span> <i>{{ item.jfrs ? item.jfrs : '-' }}</i></p>
						<p>{{item.city}}</p>
						<div class="btn"><u-button type="error" size="mini" text="点击查看详情"></u-button></div>
						<div class="btnBox">
							<u-button type="success" shape="circle" size="mini" text="收藏职位+"
								@click.native.stop="addFav(item)" v-if="!favIdList.includes(item._id)"></u-button>
							<u-button type="info" shape="circle" size="mini" plain text="取消收藏-"
								@click.native.stop="removeFav(item._id)" v-else></u-button>
						</div>
					</div>
					<u-loadmore :status="status" />
				</div>
			</div>

			<div class="fixBottom">
				<div class="container">
					<div class="flexBox">
						<div class="btn">
							<u-button type="success" plain text="考试时间详情" @click="toGg()"></u-button>
						</div>
						<div class="btn">
							<u-button type="success" text="收藏职位列表" @click="toSc()"></u-button>
						</div>
					</div>
				</div>

			</div>


			<u-modal :show="showLogin" title="体验次数已用尽,请输入口令码" :cancelText="'暂不登录'" :showCancelButton="false"
				:showConfirmButton="false">
				<view class="slot-confirmButton">
					<div class="modalBtns">
						<div>
							<u--input placeholder="请输入口令码" border="surround" v-model="klcode"></u--input>
						</div>
						<u-button type="error" text="确定" @click="checkKlm"></u-button>
						<div class="ewmBox">
							<image :src="userInfo.ewm" show-menu-by-longpress="true" mode="widthFix"></image>
							<p>添加助教微信免费帮查<br>或59元购买口令码</p>
						</div>
					</div>

				</view>
			</u-modal>
			<div class="loadBox" v-if="loading">
				<u-loading-icon size="36" mode="circle" :vertical="true" color="red" text="加载中..."
					textSize="20"></u-loading-icon>
			</div>
			<share></share>
			<u-toast ref="uToast"></u-toast>
		</div>
	</div>
</template>

<script>
	import {
		mapActions
	} from 'vuex';
	const db = wx.cloud.database()
	import share from '../../common/share/index.vue';
	export default {
		data() {
			return {
				banner: "https://www.baixuemianshi.com/zhuanti/sk_stl/images/banner_zwxq2.jpg?" + new Date(),
				searchInfo: "",
				showLogin: false,
				klcode: "",
				loading: true,
				status: "loadmore",
				loadEnd: true,
				page: 0,
				list: [],
				cityList: ["哈尔滨", "齐齐哈尔", "牡丹江", "佳木斯", "大庆", "鹤岗", "伊春", "鸡西", "七台河", "双鸭山", "绥化", "黑河", "大兴安岭"],
				selectCity: "选择地区",
				showCity: false,
				sortList: ['默认排序', '招录人数优先'],
				selectSort: "默认排序",
				showSort: false,
				searchVal: "",
				clickSearch: false,
				favList: [],
				favIdList: [],
				openid: "",

				sk_bl_hasLogin: false,
				userInfo: {
					ewm: "",
					kfList: [{
							tel: "18145507677",
							img: "https://www.baixuemianshi.com/zhuanti/gk-gjj/images/kefu/1.png"
						},
						{
							tel: "18145517677",
							img: "https://www.baixuemianshi.com/zhuanti/gk-gjj/images/kefu/2.png"
						},
						{
							tel: "18145187677",
							img: "https://www.baixuemianshi.com/zhuanti/gk-gjj/images/kefu/3.png"
						},
						{
							tel: "17745108327",
							img: "https://www.baixuemianshi.com/zhuanti/gk-gjj/images/kefu/4.png"
						},
						{
							tel: "17745108347",
							img: "https://www.baixuemianshi.com/zhuanti/gk-gjj/images/kefu/5.png"
						},
						{
							tel: "19917513673",
							img: "https://www.baixuemianshi.com/zhuanti/gk-gjj/images/kefu/6.png"
						},
						{
							tel: "19917513672",
							img: "https://www.baixuemianshi.com/zhuanti/gk-gjj/images/kefu/7.png"
						},
						{
							tel: "18045107677",
							img: "https://www.baixuemianshi.com/zhuanti/gk-gjj/images/kefu/8.png"
						},
						{
							tel: "17766512982",
							img: "https://www.baixuemianshi.com/zhuanti/gk-gjj/images/kefu/9.png"
						},
						{
							tel: "18646042617",
							img: "https://www.baixuemianshi.com/zhuanti/gk-gjj/images/kefu/10.png"
						},
						{
							tel: "18249066701",
							img: "https://www.baixuemianshi.com/zhuanti/gk-gjj/images/kefu/11.png"
						}
					]
				},
				searchNum: 0
			};
		},
		onShareAppMessage(options) {
			let shareObj = {
				title: "黑龙江省考-职位匹配",
				path: '/pages/sk-tools/zwpp/index?name=' + this.name,
				imageUrl: ''
			};
			return shareObj
		},
		onShareTimeline(res) {
			let that = this;
			return {
				title: '黑龙江省考-职位匹配',
				query: "name=" + that.name
			};
		},
		onShow() {},
		onPullDownRefresh() {
			console.log('refresh');
			setTimeout(function() {
				uni.stopPullDownRefresh();
			}, 1000);
		},
		onPageScroll(e) {
			let that = this;
			that.scrollTop = e.scrollTop;
		},
		onLoad(options) {

		},
		computed: {
			searchtimes() {
				return this.$store.getters.searchtimes ? this.$store.getters.searchtimes : '';
			},
			userphone() {
				return this.$store.getters.userphone ? this.$store.getters.userphone : '';
			}
		},
		mounted() {
			if (this.searchtimes > 0) {
				this.searchNum = this.searchtimes
			}
			let hLogin = wx.getStorageSync("sk_bl_hasLogin");
			if (hLogin) {
				this.sk_bl_hasLogin = true
			}
		},
		watch: {

		},
		created() {
			let that = this;
			that.getsearchInfo()
		},
		onReachBottom() {
			if (this.loadEnd) {
				return
			}
			this.status = 'loading';
			this.page = this.page + 1;
			if (!this.clickSearch) {
				this.searchVal = ''
			}
			this.searchByBmmc()

		},
		onShow() {
			let r = Math.floor(Math.random() * this.userInfo.kfList.length)
			this.userInfo.ewm = this.userInfo.kfList[r].img
		},
		methods: {
			...mapActions(['LogSetSearchtimes', 'LogSetPhone']),
			getsearchInfo() {
				let that = this
				db.collection('hlj_zwpp_searchinfo').doc('b751f28065b1ff4508741b8276ba5425').get({
					success: res => {
						that.searchInfo = res.data
						that.searchByBmmc()
						that.loadEnd = false
						that.getopenid()

					}
				})
			},
			getopenid() {
				let that = this
				wx.cloud.callFunction({
					name: 'getopenid',
					data: {},
					complete: res => {
						that.openid = res.result.openid
						that.getAllFav()
					}
				})
			},
			checkKlm() {
				let that = this
				wx.cloud.callFunction({
					name: 'get_klm',
					data: {},
					complete: res => {
						if (res.result.klm == that.klcode) {
							that.sk_bl_hasLogin = true
							that.showLogin = false
							wx.setStorageSync('sk_bl_hasLogin', true);
						} else {
							uni.showToast({
								icon: "error",
								title: '口令码不正确'
							});
							that.showLogin = true
						}
					}
				})
			},
			showDetail(id) {
				if (!this.userphone) {
					uni.showToast({
						title: "请先登录！",
						icon: "error"
					})
					uni.navigateTo({
						url: '../../my/login?navTlt=' + '职位匹配'
					})
					return
				}

				if (this.searchNum >= 3 && !this.sk_bl_hasLogin) {
					this.showLogin = true
					return
				}
				this.searchNum += 1
				this.LogSetSearchtimes(this.searchNum);
				uni.navigateTo({
					url: '../zwxq/index?colname=' + this.searchInfo.colname + '&id=' + id
				})
			},
			changeCity(e) {
				this.selectCity = e.value[0]
				this.showCity = false
				this.page = 0
				this.list = []
				this.loading = true
				this.loadEnd = false
				this.status = 'loadmore'
				this.searchByBmmc()

			},
			changeSort(e) {
				this.selectSort = e.value[0]
				this.showSort = false
				this.page = 0
				this.list = []
				this.loading = true
				this.loadEnd = false
				this.status = 'loadmore'
				this.searchByBmmc()
			},
			searchFuc() {
				let that = this
				if (!that.searchVal) {
					that.clickSearch = false
				} else {
					that.clickSearch = true
				}
				that.page = 0
				that.list = []
				that.loading = true
				that.loadEnd = false
				that.status = 'loadmore'

				that.searchByBmmc()
			},
			searchByBmmc() {
				let that = this
				wx.cloud.callFunction({
					name: 'search_bmmc',
					data: {
						colname: that.searchInfo.colname,
						keyword: that.searchVal,
						selectSort: that.selectSort,
						city: that.selectCity,
						limit: 20,
						page: that.page
					},
					complete: res => {
						console.log(res)
						if (res.result.length > 0) {
							that.list = that.list.concat(res.result)
						} else {
							that.loadEnd = true
							that.status = 'nomore'
						}
						that.loading = false
					}
				})
			},
			changePath(path) {
				uni.navigateTo({
					url: path
				})
			},
			addFav(info) {
				let that = this
				if (that.favIdList.length >= 10) {
					uni.showToast({
						title: "最多收藏10个！",
						icon: "error"
					})
					return
				}
				db.collection('1_hljsk_fav').add({
					data: {
						colname: that.searchInfo.colname,
						zwid: info._id,
						zwinfo: info,
						time: new Date()
					},
					success: res => {
						that.favIdList.push(info._id)
					}
				})
			},
			getAllFav() {
				let that = this
				db.collection('1_hljsk_fav').where({
					_openid: that.openid
				}).get({
					success: res => {
						that.favList = res.data
						let lists = that.favList.map(item => item.zwid)
						that.favIdList = lists
					}
				})
			},
			removeFav(id) {
				let that = this
				db.collection('1_hljsk_fav').where({
					_openid: that.openid,
					zwid: id
				}).remove({
					success: res => {
						that.getAllFav()
					}
				})
			},
			toGg() {
				uni.navigateTo({
					url: '../../webview/index?href=https://www.baixuemianshi.com/zhuanti/sk_stl/kssj.php'
				})
			},
			toSc() {
				uni.navigateTo({
					url: './sc'
				})
			}
		},
		components: {
			share
		}
	};
</script>

<style scoped>
	@import url(./index.css);
</style>